<template>
  <div class="weather-wrapper"  :style="{'top': top,'left' : left,'right' : right,'bottom' : bottom}">
    <div class="weather-card madrid">
      <div class="weather-icon" :class="weatherClass"></div>
      <h1 class="h1">{{weather.wendu}}º</h1>
      <p class="p" @click="dialogFormVisible = true">{{weather.city}}</p>
    </div>
      <el-dialog title="选择城市" :visible.sync="dialogFormVisible" :modal="false">
            <el-select v-model="city" placeholder="请选择" :filterable="true">
              <el-option
                v-for="item in cities"
                :key="item.value"
                :label="item.label"
                :value="item.label">
                <span style="float: left">{{ item.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
              </el-option>
            </el-select>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="changeWeather">确 定</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import Storage from '../../util/StorageUtil.js'
export default {
  name: 'Weather',
  data () {
    return {
      dialogFormVisible: false,
      cities: [
        {
          value: 'Beijing',
          label: '北京'
        }, {
          value: 'Shanghai',
          label: '上海'
        }, {
          value: 'Changsha',
          label: '长沙'
        }, {
          value: 'Nanjing',
          label: '南京'
        }, {
          value: 'Hangzhou',
          label: '杭州'
        }, {
          value: 'Chengdu',
          label: '成都'
        }, {
          value: 'Shenzhen',
          label: '深圳'
        }, {
          value: 'Henan',
          label: '河南'
        }, {
          value: 'HongKong',
          label: '香港'
        }, {
          value: 'Guangzhou',
          label: '广州'
        }, {
          value: 'Qingdao',
          label: '青岛'
        }, {
          value: 'Wuhan',
          label: '武汉'
        }, {
          value: 'Chongqing',
          label: '重庆'
        }, {
          value: 'SanMenXia',
          label: '三门峡'
        }],
      city: Storage.get('city') || '上海',
      weather: {
        wendu: 0,
        type: '',
        city: ''
      },
      hour: new Date().getHours()
    }
  },
  computed: {
    weatherClass: function () {
      if (this.hour > 17) return 'starry'
      else if (this.weather.type === '彩虹') return 'rainbow'
      else if (this.weather.type === '阴') return 'cloudy'
      else if (this.weather.type === '多云') return 'cloudy'
      else if (this.weather.type === '晴') return 'sunny'
      else if (this.weather.type.indexOf('雪')) return 'snowy'
      else if (this.weather.type.indexOf('雷')) return 'stormy'
      else if (this.weather.type.indexOf('雨')) return 'rainy'
    }
  },
  props: {
    bottom: {
      type: [String, Number],
      default: 'auto'
    },
    left: {
      type: [String, Number],
      default: 'auto'
    },
    top: {
      type: [String, Number],
      default: 'auto'
    },
    right: {
      type: [String, Number],
      default: 'auto'
    }
  },
  mounted () {
    this.getWeather()
  },
  methods: {
    getWeather: function () {
      const param = {
        city: this.city
      }
      this.$get('https://www.apiopen.top/weatherApi?', param).then((response) => {
        console.log(response)
        if (response.code !== 200) {
          this.$message.error('请求失败！' + response.msg)
          return
        }
        this.weather.wendu = response.data.wendu
        this.weather.city = response.data.city
        this.weather.type = response.data.forecast[0].type
      }).catch((err) => {
        console.log(err)
        this.$message.error('请求失败！' + err)
      })
    },
    changeWeather: function () {
      this.dialogFormVisible = false
      this.getWeather()
      Storage.set('city', this.city)
    }
  }
}
</script>

<style scoped>
@import "../../../static/css/weather.css";
.weather-wrapper{
  position: fixed;
}
</style>
